<template>
	<div>
		<div
			v-if="usercolumn.length > 0"
			class="setting-column"
			v-loading="isSave"
		>
			<div class="setting-column__title">
				<span class="move_b"></span>
				<span class="show_b">显示</span>
				<span class="name_b">名称</span>
			</div>
			<div class="setting-column__list" ref="list">
				<ul>
					<li v-for="item in usercolumn" :key="item.prop">
						<span class="move_b">
							<el-tag class="move" style="cursor: move"
								><el-icon-d-caret
									style="width: 1em; height: 1em"
							/></el-tag>
						</span>
						<span class="show_b">
							<el-switch
								v-model="item.hide"
								:active-value="false"
								:inactive-value="true"
							></el-switch>
						</span>
						<span class="name_b" :title="item.prop">{{
							item.label
						}}</span>
					</li>
				</ul>
			</div>
			<div class="setting-column__bottom">
				<el-button @click="cancel" :disabled="isSave">取消</el-button>
				<el-button @click="save" type="primary">确定导出</el-button>
			</div>
		</div>
		<el-empty
			v-else
			description="暂无可配置的列"
			:image-size="80"
		></el-empty>
	</div>
</template>

<script>
import Sortable from "sortablejs";
import Export from "@/utils/exportToExcel";

export default {
	components: {
		Sortable,
	},
	props: {
		column: { type: Object, default: () => {} },
		data: { type: Object, default: () => {} },
	},
	data() {
		return {
			isSave: false,
			usercolumn: JSON.parse(JSON.stringify(this.column || [])),
			excelcolumn: [],
		};
	},
	mounted() {
		this.usercolumn.length > 0 && this.rowDrop();
	},
	methods: {
		rowDrop() {
			const _this = this;
			const tbody = this.$refs.list.querySelector("ul");
			Sortable.create(tbody, {
				handle: ".move",
				animation: 300,
				ghostClass: "ghost",
				onEnd({ newIndex, oldIndex }) {
					const tableData = _this.usercolumn;
					const currRow = tableData.splice(oldIndex, 1)[0];
					tableData.splice(newIndex, 0, currRow);
				},
			});
		},
		cancel() {
			this.$emit("excelCancel");
		},
		save() {
			this.excelcolumn = this.usercolumn;
            let fields={}
            this.excelcolumn.forEach(item => {
                if(!item.hide){
                    eval("fields."+item.prop+"='"+item.label+"';");
                }
            });
            Export(JSON.parse(JSON.stringify(this.data || [])), fields, "文档-"+new Date().getTime());
            this.$message.success("导出成功");
		},
	},
};
</script>

<style scoped>
.setting-column {
}
.print-main {
	display: none;
}
.setting-column__title {
	border-bottom: 1px solid #ebeef5;
	padding-bottom: 15px;
}
.setting-column__title span {
	display: inline-block;
	font-weight: bold;
	color: #909399;
	font-size: 12px;
}
.setting-column__title span.move_b {
	width: 30px;
	margin-right: 15px;
}
.setting-column__title span.show_b {
	width: 60px;
}
.setting-column__title span.name_b {
	width: 140px;
}
.setting-column__title span.width_b {
	width: 60px;
	margin-right: 15px;
}
.setting-column__title span.sortable_b {
	width: 60px;
}
.setting-column__title span.fixed_b {
	width: 60px;
}

.setting-column__list {
	max-height: 314px;
	overflow: auto;
}
.setting-column__list li {
	list-style: none;
	margin: 10px 0;
	display: flex;
	align-items: center;
}
.setting-column__list li > span {
	display: inline-block;
	font-size: 12px;
}
.setting-column__list li span.move_b {
	width: 30px;
	margin-right: 15px;
}
.setting-column__list li span.show_b {
	width: 60px;
}
.setting-column__list li span.name_b {
	width: 140px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: default;
}
.setting-column__list li span.width_b {
	width: 60px;
	margin-right: 15px;
}
.setting-column__list li span.sortable_b {
	width: 60px;
}
.setting-column__list li span.fixed_b {
	width: 60px;
}
.setting-column__list li.ghost {
	opacity: 0.3;
}

.setting-column__bottom {
	border-top: 1px solid #ebeef5;
	padding-top: 15px;
	text-align: right;
}
</style>
